<template>
  <div id="app">
    <keep-alive :include="aliveRouter">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'App',
  computed: {
    ...mapState({
      aliveRouter: state => state.aliveRouter
    })
  },
  methods: {
  beforeunloadHandler () { // 实现关闭窗口清除用户登录数据
    this._beforeUnload_time = new Date().getTime()
    },
    unloadHandler (e) {
    this._gap_time = new Date().getTime() - this._beforeUnload_time
    // 判断是窗口关闭还是刷新
    if (this._gap_time <= 5) {
      // 如果是登录状态，关闭窗口前，移除用户
      this.$store.dispatch('LogOut')
    }
    }
  },
  mounted () {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed () {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  }
}
</script>

<style lang="less">
@import 'assets/style/base.less';
@import 'assets/style/variable.less';
</style>
